<template>
  <div class="path-bar">
    <el-radio-group
      v-model="deviceType"
      @change="getDeviceTypeData"
      class="radio-group-content"
    >
      <el-radio-button
        :label="item.name"
        v-for="item in deviceTypeList"
        :value="item.id"
        :key="item.id"
      />
    </el-radio-group>
    <el-transfer
      class="transfer-content"
      v-model="selectValue.value"
      filterable
      :filter-method="filterMethod"
      :props="{ key: 'name', label: 'name' }"
      :data="table.data"
      :titles="['可选设备', '已选设备']"
      @change="rightChange"
    />
    <div class="footer">
      <div></div>
      <div class="search-btn">
        <el-button class="reset-btn" @click="resetForm()">取 消 </el-button>
        <el-button class="confirm-btn" @click="submitForm()">确 认 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps } from "vue";
import {
  getDeviceTypeList,
  getAddNetwork,
} from "../request.js";
import { getDictionary } from "@/service/modules/publicModule";
import { ElMessage } from "element-plus";
const emits = defineEmits(["operationDone"]);

const props = defineProps({
  operationId: {
    type: Object,
    default: () => {},
  },
});

const deviceType = ref(1);
const deviceTypeList = ref([]);
const selectValue = reactive({ value: [] });
const selectedItemsByType = reactive({});
const allSelectedItems = reactive({ value: [] });

const getDeviceTypeData = (val) => {
  console.log(val);
  deviceType.value = val;
  if (!selectedItemsByType[deviceType.value]) {
    selectedItemsByType[deviceType.value] = [];
  }
  // 更新 selectValue.value 为当前类型的选中项
  selectValue.value = selectedItemsByType[deviceType.value];
  init();
};

const filterMethod = (query, item) => {
  return item.name.toLowerCase().includes(query.toLowerCase());
};

const rightChange = (val) => {
  console.log("val ===>", val);

  selectedItemsByType[deviceType.value] = val;
  updateAllSelectedItems();
};

const updateAllSelectedItems = () => {
  // 合并所有条件下选中的路段
  allSelectedItems.value = Object.values(selectedItemsByType).flat();
};

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const init = async () => {
  getDeviceTypeList({
    deviceType: deviceType.value,
    netAccountCode: props.operationId.netAccountCode,
  }).then((res) => {
    table.data = res.data.result;
    selectValue.value = table.data
      .filter((item) => item.bindState)
      .map((item) => item.name);
    console.log("table.data ===>", table.data);
  });
};

const getData = async () => {
  await getDictionary("net_device_category").then((res) => {
    deviceTypeList.value = res.data.result;
  });

  init();
};

watch(deviceType, (newType) => {
  // 如果有之前保存的选中项，则恢复它们
  if (selectedItemsByType[newType]) {
    selectValue.value = selectedItemsByType[newType];
  } else {
    // 否则，初始化为空数组
    selectValue.value = [];
    selectedItemsByType[newType] = [];
  }
});

getData();

const resetForm = () => {
  emits("operationDone");
};

const submitForm = () => {
  console.log("deviceType ===>", deviceType.value);

  console.log("allSelectedItems.value ===>", allSelectedItems.value);

  if (props.operationId.netType === "1") {
    if (allSelectedItems.value.length > 1) {
      ElMessage.error("只能选择一个设备");
      return;
    }
  }

  getAddNetwork({
    netType: props.operationId.netType,
    deviceCode: allSelectedItems.value,
    deviceType: deviceType.value,
    netAccountCode: props.operationId.netAccountCode,
  }).then((res) => {
    console.log("res ===>", res);
    if (res.data.code === 0) {
      ElMessage({
        type: "success",
        message: res.data.result,
      });
      emits("operationDone");
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
</script>

<style lang="less" scoped>
.path-bar {
  text-align: center;
}
.radio-group-content {
  margin-top: 24px;
}
.transfer-content {
  margin-top: 36px;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.search-btn {
  display: flex;
}

.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>